<template>
  <el-aside :width="asideWidth + 'px'" class="h-fixed-full layout-aside" style="overflow-x:hidden " :style="'background-color:' + backgroundColor">
    <div class="logo lh-48px text-center col-2 pd-rl-20px">
      <slot name="logo"></slot>
    </div>
    <div class="v2-scrollbar-y">
      <el-menu
                 :default-active="defaultActive"
                 :background-color="backgroundColor"
                 :text-color="textColor"
                 @select="menuSelect"
                 v-bind="$attrs"
                 :collapse="collapse"
      >
        <template v-for="(menu ) in menus">
          <el-menu-item :index="menu.path" :route="menu" v-if="isHideAside(menu) || !hasChild(menu)" >
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.name}}</span>
          </el-menu-item>
          <aside-menu-item :menu="menu" v-else ></aside-menu-item>
        </template>
      </el-menu>
    </div>
  </el-aside>
</template>

<script>
import asideMenuItem from "components/aside/aside-menu-item";
import Book from "views/learn/book";
export default {
  name: "aside-menu",
  components:{
    asideMenuItem
  },
  props:{
    menus: {
      type: Array,
      default(){
        return []
      }
    },
    defaultActive:{
      type: String,
      default: '/home'
    },
    backgroundColor:{
      type: String,
      default: '#fff'
    },
    textColor:{
      type: String,
      default: '#333'
    },
    collapse:{
      type: Boolean ,
      default: false
    }
  },
  data(){
    return {
      asideWidth: 200 ,
    }
  },
  methods:{
    isHideAside(menu){
      return menu.hideAside === true
    },
    hasChild(menu){
      return menu.children && menu.children.length > 0
    },
    menuSelect(data,indexPath , item){
      this.$emit("menu-select" ,item.route )
    }
  }
}
</script>

<style >

</style>
